<template>
	<div class="card">
		<div class="card-header">
			<div class="card-header-left">
				<div class="daren">
					达人榜
				</div>
				<div class="daren-list">
					<div>
						<span>138****5678 已赚</span> <span style="color: #CE2521;">¥ 100.00</span>
					</div>
					<div>
						<span>153****9936 已赚</span> <span style="color: #CE2521;">¥ 1300.00</span>
					</div>
					<div>
						<span>188****7891 已赚</span> <span style="color: #CE2521;">¥ 500.00</span>
					</div>
				</div>
			</div>
			<div style="display: flex;align-items: center;justify-content: center;">
				<div class="line-middle">
					&nbsp;
				</div>
			</div>
			<div class="card-header-right">

				<div style="display: flex;flex-direction: column; flex: 1;">
					<span style="font-size: 10.5px;">倒计时:</span>
					<div style="line-height: 75px; height: 70px; color:#F72420;font-weight: 400;font-size: 70px;">010
					</div>
				</div>
				<div style="display: flex;flex-direction: column; align-items: flex-end;">
					<div style="width: 21.5px;
height: 21.5px;
line-height: 21.5px;
text-align: center;
font-size: 20.5px;
color:#fff;
background: #F72420;
transform: rotate(15deg);
border-radius: 50%;">!</div>
					<div style="color:#F72420;font-size: 30px; flex: 1; align-items: flex-end; display: flex;">
						<span>天</span>
					</div>
					<div style="color:#F72420;font-size: 10.5px; margin-bottom: 4px;">23时59分</div>
				</div>
			</div>
		</div>
		<div class="card-content" v-if="imageUrl">
			<img style="width: 100%;height: auto" :src="imageUrl + '?x-oss-process=image/resize,w_750'" />
		</div>
		<div class="card-bottom">
			<div class="button btn-red" @click="goGetCash">
				去 提 现
			</div>
			<div class="button btn-yellow">
				邀请好友参与
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ActGetCash',
		props: {
			title: {
				type: String,
				default: ''
			},
			imageUrl: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style scoped>
	.daren {
		background-color: #F9282C;
		align-self: flex-start;
		border-radius: 8.5px;
		border-bottom-left-radius: 0;
		font-size: 13px;
		color: #F8FBF4;
		width: 72.5px;
		text-align: center;
	}

	.daren-list {
		width: 140px;
		height: 56px;
		background: #F8FBF4;
		border-radius: 0 6.5px 6.5px 6.5px;
		font-size: 9px;
		padding-left: 7.5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
	}

	.card {
		width: 360px;
		border-radius: 12.5px;
		margin: 0 7.5px 7.5px 7.5px;
		background: linear-gradient(0deg, #FDEFE2 0%, #ffffff 100%);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		position: relative;
		border-radius: 8px;
		border: 5px solid #EDAD87;
		padding: 7.5px;
	}

	.card-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.card-header-left {
		display: flex;
		flex-direction: column;
	}

	.card-header-right {
		margin-left: 7.5px;
		display: flex;
		flex-direction: row;
	}

	.line-middle {
		border-left: 1px solid #999999;
		height: 80%;
	}

	.card-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 7.5px 12.5px 0;
	}

	.button {
		color: #fff;
		background-size: 135px 47.5px;
		width: 135px;
		height: 47.5px;
		text-align: center;
		line-height: 42.5px;
		font-size: 16px;
	}

	.btn-red {
		background-image: url('https://blkq-static.oss-cn-shenzhen.aliyuncs.com/static/images/activity/9th/red.png');
	}

	.btn-yellow {
		background-image: url('https://blkq-static.oss-cn-shenzhen.aliyuncs.com/static/images/activity/9th/yellow.png');
	}
</style>
